// 这是main.js项目的JS入口文件

// 1.导入JQuery
// import *** from ** 是ES6中导入模块的方式
// 由于es6的代码太高级了，浏览器解析不了，所以这一行执行会报错
import $ from 'jquery'

// 使用import语法导入css样式表
import './css/index.css'
import './css/index.less'
import './css/index.scss'
// 注意： webpack 默认只能打包处理 js类型的文件，无法处理其他非js类型的文件
// 如果要处理 非js类型的文件，我们需要手动安装一些合适的第三方loader加载器
// 1. 如果想要打包处理css文件，需要安装cnpm i style-loader css-loader -D
// 2. 打开webpack.config.js 这个配置文件，在里面，新增一个配置结点，叫做module，它是一个对象；
// 在这个module对象上，有一个rules属性，这个rules属性是个数组；这个数组中，存放了，所有第三方文件的匹配和处理规则


// 注意： webpack 处理第三方文件类型的过程：
// 1. 发现这个要处理的文件不是js文件，然后就去配置文件中，查找有没有对应的第三方loader规则
// 2. 如果能找到对应的规则，就会调用对应的loader处理这种文件类型
// 3. 在调用loader的时候，是从后往前调用的
// 4. 当最后一个loader 调用完毕，就会把处理的结果，直接交给webpack进行打包合并，并最终输出到bundle.js中

$(function(){
    $('li:odd').css('backgroundColor','yellow')
    $('li:even').css('backgroundColor',function(){
        return '#' + 'D97634'
    })
})

// 经过刚才的演示，webpack可以做什么事情？？？
// 1. webpack能够处理js 文件之间的互相依赖关系；
// 2. webpack能够处理js的兼容问题，把高级的、浏览器不识别的传化为低级的浏览器可识别的

// 刚才运行的命令： webpack 要打包的文件路径 -o 要输出的文件路径